<template>
  <div class="home">
    <!-- 折线图 -->
    <div
      id="line"
      style="
        width: 480px;
        height: 300px;
        display: inline-block;
        border: 1px solid #ccc;
        margin-right: 20px;
      "
    ></div>
    <!-- 饼状图 -->
    <div
      id="pie"
      style="
        width: 480px;
        height: 300px;
        display: inline-block;
        border: 1px solid #ccc;
      "
    ></div>


    
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
let echarts = require("echarts");
export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      list: "cate/list",
    }),
  },
  methods: {
    ...mapActions({
      reqList: "cate/reqList",
    }),
  },
  mounted() {
    //请求数据
    this.reqList();
  },
  watch: {
    //监听list
    list: {
      handler() {
        if (this.list.length > 0) {
          console.log("画图");
          console.log(this.list);

          // 折线图
          var myLine = echarts.init(document.getElementById("line"));
          var option = {
            title: {
              text: "商品分类子类数据",
            },
            tooltip: {},
            legend: {
              data: ["数量"],
            },
            xAxis: {
              data: this.list.map((item) => item.catename),
            },
            yAxis: {},
            //series 数据
            series: [
              {
                name: "数量",
                type: "line",
                data: this.list.map((item) =>
                  item.children ? item.children.length : 0
                ),
                smooth: true,
              },
            ],
          };
          myLine.setOption(option);

          // 饼状图
          var myPie = echarts.init(document.getElementById("pie"));
          var option2 = {
            tooltip: {
              trigger: "item",
            },
            legend: {
              top: "5%",
              left: "center",
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "20",
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: this.list.map(item=>({name:item.catename,value:item.children?item.children.length:0}))
              },
            ],
          };
          myPie.setOption(option2);
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
</style>